import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TextInput,
  TouchableOpacity,
  Alert,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { observer } from 'mobx-react-lite';
import { Ionicons } from '@expo/vector-icons';

export const AddExpensePage = observer(() => {
  const [expenseType, setExpenseType] = useState('');
  const [amount, setAmount] = useState('');
  const [description, setDescription] = useState('');
  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);

  const expenseTypes = [
    { id: 'fuel', name: '加油', icon: 'water', color: '#0ea5e9' },
    { id: 'maintenance', name: '保养', icon: 'construct', color: '#10b981' },
    { id: 'repair', name: '维修', icon: 'hammer', color: '#f59e0b' },
    { id: 'parking', name: '停车', icon: 'car', color: '#8b5cf6' },
    { id: 'cleaning', name: '洗车', icon: 'water-outline', color: '#06b6d4' },
    {
      id: 'other',
      name: '其他',
      icon: 'ellipsis-horizontal',
      color: '#64748b',
    },
  ];

  const handleSubmit = () => {
    if (!expenseType || !amount) {
      Alert.alert('提示', '请填写完整的费用信息');
      return;
    }

    Alert.alert('成功', '费用记录已添加', [
      {
        text: '确定',
        onPress: () => {
          // 重置表单
          setExpenseType('');
          setAmount('');
          setDescription('');
        },
      },
    ]);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>添加费用</Text>
        <TouchableOpacity style={styles.submitButton} onPress={handleSubmit}>
          <Text style={styles.submitText}>保存</Text>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        {/* 费用类型选择 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>费用类型</Text>
          <View style={styles.typeGrid}>
            {expenseTypes.map(type => (
              <TouchableOpacity
                key={type.id}
                style={[
                  styles.typeCard,
                  expenseType === type.id && styles.typeCardActive,
                ]}
                onPress={() => setExpenseType(type.id)}
              >
                <View
                  style={[
                    styles.typeIcon,
                    { backgroundColor: type.color + '20' },
                    expenseType === type.id && { backgroundColor: type.color },
                  ]}
                >
                  <Ionicons
                    name={type.icon as any}
                    size={24}
                    color={expenseType === type.id ? '#fff' : type.color}
                  />
                </View>
                <Text
                  style={[
                    styles.typeName,
                    expenseType === type.id && styles.typeNameActive,
                  ]}
                >
                  {type.name}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        {/* 金额输入 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>金额</Text>
          <View style={styles.inputContainer}>
            <Text style={styles.currencySymbol}>¥</Text>
            <TextInput
              style={styles.amountInput}
              placeholder="0.00"
              value={amount}
              onChangeText={setAmount}
              keyboardType="numeric"
            />
          </View>
        </View>

        {/* 日期选择 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>日期</Text>
          <View style={styles.inputContainer}>
            <Ionicons name="calendar-outline" size={20} color="#64748b" />
            <TextInput
              style={styles.dateInput}
              placeholder="选择日期"
              value={date}
              onChangeText={setDate}
            />
          </View>
        </View>

        {/* 备注 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>备注</Text>
          <TextInput
            style={styles.descriptionInput}
            placeholder="添加备注信息..."
            value={description}
            onChangeText={setDescription}
            multiline
            numberOfLines={3}
          />
        </View>

        {/* 快捷金额 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>快捷金额</Text>
          <View style={styles.quickAmounts}>
            {[50, 100, 200, 500].map(quickAmount => (
              <TouchableOpacity
                key={quickAmount}
                style={styles.quickAmountButton}
                onPress={() => setAmount(quickAmount.toString())}
              >
                <Text style={styles.quickAmountText}>¥{quickAmount}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1e293b',
  },
  submitButton: {
    backgroundColor: '#0ea5e9',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
  },
  submitText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  content: {
    flex: 1,
    padding: 20,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
    marginBottom: 16,
  },
  typeGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  typeCard: {
    width: '48%',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    alignItems: 'center',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  typeCardActive: {
    borderWidth: 2,
    borderColor: '#0ea5e9',
  },
  typeIcon: {
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 8,
  },
  typeName: {
    fontSize: 14,
    color: '#64748b',
    fontWeight: '500',
  },
  typeNameActive: {
    color: '#0ea5e9',
    fontWeight: '600',
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  currencySymbol: {
    fontSize: 24,
    color: '#1e293b',
    marginRight: 8,
  },
  amountInput: {
    flex: 1,
    fontSize: 24,
    color: '#1e293b',
  },
  dateInput: {
    flex: 1,
    fontSize: 16,
    color: '#1e293b',
    marginLeft: 8,
  },
  descriptionInput: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    fontSize: 16,
    color: '#1e293b',
    textAlignVertical: 'top',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  quickAmounts: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,
  },
  quickAmountButton: {
    backgroundColor: '#fff',
    borderRadius: 8,
    paddingHorizontal: 16,
    paddingVertical: 8,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  quickAmountText: {
    fontSize: 14,
    color: '#64748b',
    fontWeight: '500',
  },
});
